<template>
    <div v-loading="loading">
        <el-card body-style="padding:10px" class="box-card">
            <el-input class="marginBottom" clearable placeholder="请输入用户名" size="small" style="width: 200px;" v-model="query.user_name"></el-input>
            <el-input class="marginBottom" clearable placeholder="请输入对方用户名" size="small" style="width: 200px;" v-model="query.object_name"></el-input>
            <el-input class="marginBottom" clearable placeholder="请输入订单号" size="small" style="width: 200px;" v-model="query.trade_no"></el-input>
            <el-select v-model="query.action" placeholder="请选择操作类型">
                <el-option v-for="item in actionList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            <el-select v-model="query.type" placeholder="请选择事由">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
                <el-date-picker v-model="times" type="daterange" range-separator="至" start-placeholder="开始日期" value-format="yyyy-MM-dd"
                    end-placeholder="结束日期" @change="start_timeFun">
                </el-date-picker>
            <el-button @click="page=1;init()" size="small" type="primary" style="margin-left: 30px;">搜索</el-button>
            <el-button @click="page=1;init()" icon="el-icon-refresh-right" size="small" type="primary">刷新</el-button>
        </el-card>
        <el-card body-style="padding:10px" class="box-card mt-10">
            <el-table :data="data" max-height="640px" size="small" style="width: 100%">

                <el-table-column label="ID" prop="id" width="70px"></el-table-column>

                <el-table-column label="用户ID" prop="user_id">
                    <template slot-scope="scope">
                        <UserInfo :user_id="scope.row.user_id" :userInfos="scope.row.user" v-if="scope.row.user_id"></UserInfo>
                    </template>
                </el-table-column>

                <el-table-column label="对方ID" prop="object_id">
                    <template slot-scope="scope">
                        <UserInfo :user_id="scope.row.object_id"  :userInfos="scope.row.object_user" v-if="scope.row.object_id"></UserInfo>
                    </template>
                </el-table-column>

                <el-table-column label="操作类型" prop="action" width="80px">
                    <template slot-scope="scope">
                        <div v-if="scope.row.action == 'wthdraw'">提现</div>
                        <div v-else-if="scope.row.action == 'recharge'">提现</div>
                        <div v-else-if="scope.row.action == 'refund'">退款</div>
                        <div v-else-if="scope.row.action == 'expend'">消费</div>
                        <div v-else-if="scope.row.action == 'profit'">收益</div>
                    </template>
                </el-table-column>

                <el-table-column label="事由" prop="type" width="80px">
                    <template slot-scope="scope">
                        <div v-if="scope.row.type == 'live'">直播付费</div>
                        <div v-else-if="scope.row.type == 'withdraw'">提现</div>
                        <div v-else-if="scope.row.type == 'invite_rebate'">邀请新人</div>
                        <div v-else-if="scope.row.type == 'recharge'">充值</div>
                        <div v-else-if="scope.row.type == 'short'">短视频</div>
                        <div v-else-if="scope.row.type == 'long'">长视频</div>
                        <div v-else-if="scope.row.type == 'same_city'">同城</div>
                        <div v-else-if="scope.row.type == 'one_by_one'">1V1密聊</div>
                        <div v-else-if="scope.row.type == 'customized'">私人订制</div>
                        <div v-else-if="scope.row.type == 'tipping'">打赏</div>
                        <div v-else-if="scope.row.type == 'gift'">直播礼物</div>
                        <div v-else-if="scope.row.type == 'rebate'">下级返利</div>
                        <div v-else-if="scope.row.type == 'system'">系统操作</div>
                    </template>
                </el-table-column>

                <el-table-column label="资金金额" prop="amount"></el-table-column>

                <!-- <el-table-column label="开户行地址" prop="bank_address"></el-table-column> -->
                <el-table-column label="关联订单号" prop="trade_no" show-overflow-tooltip></el-table-column>
                <!-- <el-table-column label="提现使用金币" prop="balance"></el-table-column> -->

                <!-- <el-table-column label="手续费" prop="fee"></el-table-column> -->


                <el-table-column label="资金类型" prop="coin_type" width="100px">
                    <template slot-scope="scope">
                        <div v-if="scope.row.coin_type == 'balance'">balance</div>
                        <div v-else-if="scope.row.coin_type == 'cny'">cny</div>

                    </template>
                </el-table-column>

                <el-table-column label="添加时间" prop="created_at"></el-table-column>
                <el-table-column label="操作" width="200px">
                    <template slot-scope="scope">
                        <div>
                            <el-button size="mini" slot="reference" type="success" style="padding: 10px"
                                @click="toDetails(scope.row.id)"  v-permission="['ADMIN','FUND_DETAILS']">详情</el-button> 
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!-- 分页组件 -->
        <el-card body-style="padding:10px" class="box-card mt-10">
            <el-pagination :current-page="page" :total="total" @current-change="pageChange" @size-change="sizeChange"
                layout="total, prev, pager, next, sizes" style="margin-top: 8px;" />
        </el-card>
    </div>
</template>
      
<script>
import treeSelect from '@/components/SelectTree/index'
import list from "@/api/bank.json"
import medium from '@/components/medium/index'
import initData from '@/mixins/index'
export default {
    name:"fund-list",
    mixins: [initData],
    components: {
        treeSelect,
        medium
    },
    data() {
        return {
            query: {
                action: '',
                type: '',
                start_time: '',
                end_time: '',
                user_name:'',
                object_name:'',
                trade_no:''
            },
            value: '',
            options: [
                {
                    value: 'rebate',
                    label: '下级返利'
                }, {
                    value: 'invite_rebate',
                    label: '邀请新人'
                }, {
                    value: 'gift',
                    label: '直播礼物'
                },
                {
                    value: 'tipping',
                    label: '打赏'
                }, {
                    value: 'live',
                    label: '直播付费'
                }, {
                    value: 'customized',
                    label: '私人定制'
                },
                {
                    value: 'one_by_one',
                    label: '1V1密聊'
                },
                {
                    value: 'same_city',
                    label: '同城'
                },
                {
                    value: 'long',
                    label: '长视频'
                },
                {
                    value: 'short',
                    label: '短视频'
                },
                {
                    value: 'recharge',
                    label: '充值'
                },
                {
                    value: 'withdraw',
                    label: '提现'
                }
            ],
            actionList: [
                {
                    value: 'profit',
                    label: '收入'
                }, {
                    value: 'expend',
                    label: '支出'
                }
            ],
            typeList: list,
            visible: false,
            loading: false,
            images: [],
            times:""
        }
    },
    mounted() {
        //this.getworksList()
        this.beforeInit()


    },
    methods: {
        beforeInit() {
            this.url = "/money-log/index"
            this.init() //重新请求数据
            console.log("data", this.data)
        },
        selectFun(val) {
            this.query.bank_name = val
        },
        start_timeFun(e){
           console.log(e)
           this.query.start_time = e[0]
           this.query.end_time = e[1]
        },
        toDetails(id) {
            this.$router.push({ path: "/fund-details?id=" + id });
        },
        passFun(id, status) {
            let that = this
            this.$request.put('/user-withdraw/update/' + id, { status: status }).then((res) => {
                this.$message.success('操作成功')
                this.init() //重新请求数据
            })
        },
        closeBox() {
            this.type = 'create'
            this.visible = false
        },
    },
}
</script>
      
<style lang="scss" scoped>
.butBox {
    background-color: rgb(219, 219, 219);
    border: none;
    color: #555;
}

.flex {
    display: flex;
}
</style>